<template>
  <view ref="parent" class="loading-wrapper">
    <image 
      class="loading-icon" 
      :src="image"
      :style="iconStyle"
    />
    <TextJump :text="text" :duration="duration" />
  </view>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue';
import TextJump from '@/pages/components/textJump.vue';

const props = defineProps({
  text: {
    type: String,
    default: 'LOADING'
  },
  image: {
    type: String,
    required: true
  },
  // 移除固定的 size 属性
  // size: {
  //   type: Number,
  //   default: 24
  // },
  borderWidth: {
    type: Number,
    default: 2
  },
  duration: {
    type: Number,
    default: 1500
  }
});

const parent = ref(null);
let size = 24; // 初始默认大小

onMounted(() => {
  if (parent.value) {
    const parentWidth = parent.value.offsetWidth;
    // 设置图标宽度和高度为父容器宽度的 20%（可根据需求调整）
    size = parentWidth * 0.6;
  }
});

const iconStyle = computed(() => ({
  width: `${size}px`,
  height: `${size}px`,
  borderWidth: `${props.borderWidth}px`
}));
</script>

<style scoped>
.loading-wrapper {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}

.loading-icon {
  padding: 1px;
  background-color: aliceblue;
}

.loading-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: 1px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>